<%@page import="com.fpt.quanlyhethongsan.utils.Constants"%>
<%@page import="com.fpt.quanlyhethongsan.utils.UserRole"%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"
	language="java"%>

<%@ taglib uri="/struts-tags" prefix="s"%>

<form id="form" method="post" action="saveAccount">
	<input type="hidden" id="id" name="id"
		value="<s:property value='acc.id'/>"> <input type="hidden"
		id="operation" name="operation"
		value='<s:property value="operation"/>'>
	<s:if test="isStaff()">
		<input type="hidden" id="roleId" name="roleId"
			value="<%=UserRole.STAFF.getId()%>">
	</s:if>
	<s:else>
		<s:if test="operation == 'add'">
			<input type="hidden" id="roleId" name="roleId"
				value="<%=UserRole.CUSTOMER.getId()%>">
		</s:if>
		<s:else>
			<input type="hidden" id="roleId" name="roleId"
				value="<s:property value='acc.role.id'/>">
		</s:else>
	</s:else>
	<table id="ver-zebra">
		<colgroup>
			<col class="vzebra-odd" />
			<col class="vzebra-even" />
			<col class="vzebra-odd" />
			<col class="vzebra-even" />
		</colgroup>
		<tbody>
			<tr>
				<td></td>
				<td colspan="3"><span id="error_message" class="error_message"></span></td>
			</tr>
			<s:if test="operation == 'changepassword'">
				<tr>
					<td><label>Mật khẩu mới</label></td>
					<td colspan="3"><input id="password" name="password"
						type="password" required="required" maxlength="40" /></td>
				</tr>
				<tr>
					<td><label>Xác nhận mật khẩu</label></td>
					<td colspan="3"><input id="re-password" name="re-password"
						type="password" required="required" maxlength="40" /></td>
				</tr>

				<tr>
					<td></td>
					<td colspan="3"><input type="button" value="Đổi mật khẩu"
						onclick="submitPassword();" /></td>
				</tr>
			</s:if>
			<s:else>
				<tr>
					<td><label>Họ tên</label></td>
					<td><input id="name" type="text" required="required"
						maxlength="50" name="name"
						value="<s:property value='acc.person.name'/>" /></td>
					<td><label>Email</label></td>
					<td><input id="email" type="email" required="required"
						value="<s:property value='acc.person.email'/>" name="email" /></td>
				</tr>

				<tr>
					<td><label>Điện thoại</label></td>
					<td><input id="phone" name="phone" type="tel"
						value="<s:property value='acc.person.phone'/>" required="required"
						onfocus="formatPhone($(this))" /></td>
					<td><label>Địa chỉ</label></td>
					<td><input id="address" name="address" type="text"
						required="required"
						value="<s:property value='acc.person.address'/>" maxlength="500" /></td>
				</tr>

				<s:if test="operation == 'add' || isStaff()">
					<tr>
						<td><label>Tên đăng nhập</label></td>
						<td><input id="username" name="username" type="text"
							required="required" maxlength="40" /></td>
						<td><label>Mật khẩu</label></td>
						<td><input id="password" name="password" type="password"
							required="required" maxlength="40" minlength="6"/></td>
					</tr>
				</s:if>

				<s:if test="isStaff()">
					<tr>
						<td><label>Quản lý sân</label></td>
						<td><select name="soccerFieldId" id="soccerFieldId"
							required="required">
								<option value="">Chọn</option>
								<s:iterator value="listSoccerField">
									<s:if test="status && (staff == null)">
										<option value='<s:property value="id"/>'>
											<s:property value="name" />
										</option>
									</s:if>
								</s:iterator>
						</select></td>
					</tr>
				</s:if>

				<tr>
					<td></td>
					<td colspan="3"><s:if test="%{operation == 'add'}">
							<input type="submit" value="Lưu" />
							<s:if test="isStaff()">
								<input type="button" value="Quay lại" onclick="goBack();" />
							</s:if>
						</s:if> <s:if test="operation == 'update'">
							<input type="submit" value="Cập Nhật" />
							<s:if test="isStaff()">
								<input type="button" value="Xóa" onclick="confirmToDelete();" />
							</s:if>
						</s:if></td>
				</tr>
			</s:else>
		</tbody>
	</table>
</form>
<script type="text/javascript">
	function goBack() {
		var url = "listStaff";
		window.location.href = url;
	}

	function deleteAccount() {
		var id = $('#id').val();
		var datastr = 'id=' + id;
		$.ajax({
			type : "POST",
			url : "deleteUser",
			data : datastr,
			cache : false,
			dataType : 'text',
			beforeSend : function() {
				$.blockUI({
					css : {
						border : 'none',
						padding : '15px',
						backgroundColor : '#000',
						'-webkit-border-radius' : '10px',
						'-moz-border-radius' : '10px',
						opacity : .5,
						color : '#fff'
					}
				});
			},
			complete : function() {
				$.unblockUI();
			},
			success : function(html) {
				goBack();
			},
			error : function(err) {
				$('#error_message').html("Không thể xóa vì đang được sử dụng");
				$('#error_message').css("display", "block");
			}
		});
	}

	function confirmToDelete() {
		var id = $('#id').val();
		if (id == null || id == "") {
			$('#error_message').html("Chọn một mục trước");
			$('#error_message').css("display", "block");
		} else {
			// Define the Dialog and its properties.
			$("#dialog-confirm").dialog({
				resizable : false,
				height : 140,
				modal : true,
				position : {
					my : 'center bottom',
					at : 'center top',
					of : $('#form'),
					within : $('#form')
				},
				buttons : {
					"Có" : function() {
						$(this).dialog("close");
						callback(true);
					},
					"Không" : function() {
						$(this).dialog("close");
						callback(false);
					}
				}
			});
		}

		return false;
	}

	function callback(value) {
		if (value) {
			deleteAccount();
		}
	}

	function checkPassword() {
		if ($('#password').val() != $('#re-password').val()) {
			$('#error_message').css('display', 'inline-block');
			$('#error_message').html("Mật khẩu không khớp");
		} else {
			$('#error_message').css('display', 'none');
			return true;
		}

		return false;
	}

	function submitPassword() {
		if (checkPassword() && $('#form').valid()) {
			$('#form').submit();
		}
	}

	$(function() {
		$('#form').validate();
	})

	
</script>